@syncfusion/ej2-navigations

Accordion

The Accordion component allows you to create collapsible sections of content. Each section can be expanded or collapsed, making it useful for organizing large amounts of information in a compact space.

const { Accordion } = require('@syncfusion/ej2-navigations');

let accordion = new Accordion({
  items: [
    { header: 'Section 1', content: 'Content 1' },
    { header: 'Section 2', content: 'Content 2' },
    { header: 'Section 3', content: 'Content 3' }
  ]
});
accordion.appendTo('#accordion');

Tabs

The Tabs component allows you to create tabbed interfaces, where each tab can contain different content. This is useful for organizing content into different sections that can be easily navigated by the user.

const { Tab } = require('@syncfusion/ej2-navigations');

let tab = new Tab({
  items: [
    { header: { text: 'Tab 1' }, content: 'Content 1' },
    { header: { text: 'Tab 2' }, content: 'Content 2' },
    { header: { text: 'Tab 3' }, content: 'Content 3' }
  ]
});
tab.appendTo('#tab');

Toolbar

The Toolbar component allows you to create a set of command buttons that can be used to perform various actions. This is useful for providing quick access to frequently used functions in your application.

const { Toolbar } = require('@syncfusion/ej2-navigations');

let toolbar = new Toolbar({
  items: [
    { prefixIcon: 'e-cut-icon', tooltipText: 'Cut' },
    { prefixIcon: 'e-copy-icon', tooltipText: 'Copy' },
    { prefixIcon: 'e-paste-icon', tooltipText: 'Paste' }
  ]
});
toolbar.appendTo('#toolbar');

Menu

The Menu component allows you to create hierarchical menus with multiple levels of items. This is useful for organizing navigation links or commands in a structured manner.

const { Menu } = require('@syncfusion/ej2-navigations');

let menu = new Menu({
  items: [
    { text: 'File', items: [{ text: 'Open' }, { text: 'Save' }] },
    { text: 'Edit', items: [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }] }
  ]
});
menu.appendTo('#menu');